<template>
  <div>
    <el-row :gutter="5">
      <el-col :span="5">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <div style="display: flex">
              <el-image :src="setting.iconUrl" style=" width: 30px;height: 30px;margin:3px;" />
              <div style="flex-grow: 1;margin-left: 13px;">
                <div>
                  <el-popover
                    v-if="setting.remark && setting.remark!==''"
                    placement="top"
                    width="200"
                    trigger="hover"
                    :content="setting.name"
                  >
                    <span slot="reference">{{ setting.remark }}</span>
                  </el-popover>
                  <span v-else>{{ setting.name }}</span>
                </div>
                <!--                <div style="margin-top: 2px">{{ $t('keyName') }}:{{ setting.keyName }}</div>-->
                <div style="margin-top: 2px">{{ formatDate(setting.updateDate) }}</div>
              </div>
            </div>
          </div>
          <div style="height: 470px;">
            <el-form
              :model="settingData"
              label-width="80px"
              style="width: 100%;margin-top: 5px"
            >
              <el-form-item label="Id">
                <span>{{ setting.settingId }}</span>
              </el-form-item>
              <el-form-item :label="$t('keyName')">
                <span>{{ setting.keyName }}</span>
              </el-form-item>
              <el-form-item :label="$t('type')">
                <span>{{ formatSettingType(setting) }}</span>
              </el-form-item>
              <el-form-item :label="$t('value')">
                <span>{{ setting.valueText }}</span>
              </el-form-item>
              <el-form-item :label="$t('remark')">
                <span>{{ setting.remark }}</span>
              </el-form-item>
              <el-form-item :label="$t('device')+$t('linkage')">
                <el-switch
                  v-model="setting.canDeviceLinkage"
                  :disabled="true"
                />
              </el-form-item>
              <el-form-item :label="$t('disabled')">
                <el-switch
                  v-model="setting.disabled"
                  :disabled="true"
                />
              </el-form-item>
              <el-form-item :label="$t('hidden')">
                <el-switch
                  v-model="setting.hidden"
                  :disabled="true"
                />
              </el-form-item>
              <el-form-item :label="$t('tag')">
                <el-tag
                  v-for="tag in settingTagList"
                  :key="tag"
                  class="mr-1"
                  closable
                  @close="deleteTagDeviceSetting(tag)"
                >
                  {{ tag.name }}
                </el-tag>
                <el-select v-if="showTagSelect" v-model="tagId" @change="tagSelect">
                  <el-option
                    v-for="item in tagList"
                    :key="item.tagId"
                    :label="item.name"
                    :value="item.tagId"
                  />
                </el-select>
                <el-button v-else type="text" icon="el-icon-plus" @click="showTagSelect = true" />
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
      <el-col :span="19">
        <el-card class="box-cardl" style="height: 623px">
          <el-tabs v-model="activeName">
            <el-tab-pane :label="$t('history')" name="first">
              <div class="uni-scroll" style="height: 530px">
                <el-table
                  :data="settingVersionList"
                  style="width: 100%"
                >
                  <el-table-column :label="$t('icon')">
                    <template slot-scope="scope">
                      <el-image
                        style="width: 40px;height: 40px;margin-top: 10px"
                        :src="scope.row.userIconUrl"
                        fit="fit"
                      >
                        <div slot="error" class="image-slot">
                          <i style="font-size: 35px" class="el-icon-picture-outline" />
                        </div>
                      </el-image>
                    </template>
                  </el-table-column>
                  <el-table-column :label="$t('send')" :formatter="tagStatus" />
                  <el-table-column :label="$t('user')" prop="userName" />
                  <el-table-column :label="$t('value')">
                    <template slot-scope="scope">
                      <div v-if="scope.row.type === 'switch'">
                        <el-switch
                          v-model="scope.row.value"
                          disabled
                          active-value="1"
                          inactive-value="0"
                        />
                      </div>
                      <div v-else>
                        <span>{{ scope.row.value }}</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column :label="$t('status')" :formatter="fStatus" />
                  <el-table-column :label="$t('time')" sortable>
                    <template slot-scope="scope">
                      <i class="el-icon-time" />
                      <span style="margin-left: 13px">{{ formatDate(scope.row.createdDate) }}</span>
                    </template>
                  </el-table-column>
                </el-table>
                <div style="margin: 15px 0;text-align: right">
                  <el-pagination
                    background
                    :current-page.sync="currentPage"
                    :page-size="pageSize"
                    layout="total,sizes,prev,pager,next,jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                  />
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  formatDate,
  formatSettingType,
  successNotice
} from '@/util/common'
import { listTagDeviceSettingTagByUser, deleteTagDeviceSetting, insertTagDeviceSetting } from '@/api/iot/iotTagDeviceSettingApi'
import { listTag } from '@/api/iot/iotTagApi'
import { pageGetDeviceSettingHistory } from '@/api/iot/iotDeviceSettingHistoryApi'
import {
  getPageSize, setPageSize
} from '@/util/storage'
export default {
  name: 'SettingSettingInfo',
  components: {

  },
  props: {
    setting: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      showTagSelect: false,
      settingData: {},
      tagList: [],
      tagId: null,
      settingTagList: [],
      dataList: [],
      activeName: 'first',
      startDate: null,
      endDate: null,
      settingVersionList: [],
      currentPage: 1,
      total: 0,
      pageSize: getPageSize()
    }
  },
  watch: {
    setting: {
      deep: true,
      handler(val) {
        if (val != null) {
          this.listData()
        }
      }
    }
  },
  created() {
    this.listTag()
    this.listData()
  }, methods: {
    formatSettingType(item) {
      return formatSettingType(this, item.type)
    },
    fStatus(item) {
      if (item.status === 0) {
        return '正常'
      } else if (item.status === 1) {
        return '设备报错'
      } else if (item.status === 2) {
        return '超时'
      }
    },
    tagStatus(item) {
      if (item.tag === 'v1') {
        return 'API'
      } else if (item.tag === 'uni') {
        return this.$t('phone')
      } else if (item.tag === 'manage') {
        return this.$t('manage')
      } else if (item.tag === 'wxApp') {
        return this.$t('wxApp')
      } else {
        return this.$t('unKnow')
      }
    },
    handleSizeChange(value) {
      this.pageSize = value
      setPageSize(this.pageSize)
      this.pageGetDeviceSettingHistory()
    },
    handleCurrentChange(item) {
      this.currentPage = item
      this.pageGetDeviceSettingHistory()
    },
    pageGetDeviceSettingHistory() {
      pageGetDeviceSettingHistory({
        deviceId: this.setting.deviceId,
        port: this.setting.port,
        keyName: this.setting.keyName,
        pageSize: this.pageSize,
        currentPage: this.currentPage
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.total = data.total
          this.settingVersionList = data.data
        } else {
          this.total = 0
          this.settingVersionList = []
        }
      })
    },
    tagSelect() {
      insertTagDeviceSetting({
        tagId: this.tagId,
        settingId: this.setting.settingId
      }).then(res => {
        const { code } = res
        if (code === '200') {
          this.listTagDeviceSettingTagByUser()
          this.showTagSelect = false
        }
      })
    },
    listTag() {
      listTag({

      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.tagList = data
        } else {
          this.tagList = []
        }
      })
    },
    deleteTagDeviceSetting(tag) {
      deleteTagDeviceSetting({
        id: tag.id
      }).then(res => {
        const { code } = res
        if (code === '200') {
          successNotice(this)
        }
        this.listTagDeviceSettingTagByUser()
      })
    },
    listTagDeviceSettingTagByUser() {
      listTagDeviceSettingTagByUser({
        settingId: this.setting.settingId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.settingTagList = data
        } else {
          this.settingTagList = []
        }
      })
    },
    formatDate(time) {
      return formatDate(this, time)
    },
    listData() {
      this.pageGetDeviceSettingHistory()
      this.listTagDeviceSettingTagByUser()
    }
  }
}
</script>

